<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/static/context/mytags.jsp"%>
<style>
	.uploader .placeholder_bak {
		text-align: center;
		color: #cccccc;
		font-size: 18px;
		position: relative;
	}

	.uploader .placeholder {
		border: 0px dashed #e6e6e6;
		min-height: 44px;
		padding-top: 0px;
		text-align: center;
		background: none;
		color: #cccccc;
		font-size: 18px;
		position: relative;
	}
</style>
<form action="#" method="post" id="form12">
		<table class="table_jjval" style="width:99%;">
			<input type="hidden"  name="id" id="id"/>
			<input type="hidden"  name="version" id="version"/>
			<tr height="45">
				<td style="width:20%;" class="td_left">产品编号：</td>
				<td style="width:30%;">
					<input style="margin-left:5px;width:90%;"  class="easyui-validatebox"
					data-options="required:true" missingMessage="请输入产品编号"
					type="text"  id="no" name="no"
					onkeypress="return noNumbers(event)"  maxlength="50" >
				</td>
			</tr>
			<tr height="45">
				<td style="width:20%;" class="td_left">产品名称：</td>
				<td style="width:30%;">
					<input style="margin-left:5px;width:90%;"  class="easyui-validatebox"
					data-options="required:true" missingMessage="请输入产品名称"
					type="text"  id="name" name="name"
					onkeypress="return noNumbers(event)"  maxlength="200" >
				</td>
			</tr>
			<tr height="45">
				<td style="width:20%;" class="td_left">产品类型：</td>
				<td style="width:30%;" class="controls">
						&nbsp;&nbsp;<select class="span8 chzn-select" data-placeholder="请选择产品类型" tabindex="1" id="typeId" name="typeId">
						<option value=""></option>
						<c:forEach items="${types}" var="type">
							<option value="${type.id}">${type.name}</option>
						</c:forEach>
					</select>
				</td>
			</tr>
			<tr height="45">
				<td style="width:20%;" class="td_left">数量：</td>
				<td style="width:30%;">
					<input style="margin-left:5px;width:90%;"  class="easyui-validatebox"
						   data-options="required:true" missingMessage="请输入数量"
						   type="text"  id="number" name="number"
						   onkeypress="return noNumbers(event)" >
				</td>
			</tr>
			<tr height="45">
				<td style="width:20%;" class="td_left">单价：</td>
				<td style="width:30%;">
					<input style="margin-left:5px;width:90%;"  class="easyui-validatebox"
						   data-options="required:true" missingMessage="请输入单价"
						   type="text"  id="price" name="price"
						   onkeypress="return noNumbers(event)"  maxlength="100" >
				</td>
			</tr>
			<tr height="45">
				<td style="width:20%;" class="td_left">是否推荐：</td>
				<td style="width:30%;">
					<input type="radio" name="isrecom" value="1">是
					<input type="radio" name="isrecom" value="0" checked>否
				</td>
			</tr>
			<tr height="45">
				<td style="width:20%;" class="td_left">图片：</td>
				<td style="width:30%;">
					<div id="uploaderpic" class="uploader">
						<div class="queueList" >
							<div id="dndAreapic" class="placeholder">
								<div id="filePickerpic"></div>
								<%--<p>或将文件拖到这里，单次最多可选300个</p>
                            --%></div>
						</div>
						<div class="statusBar" style="display:none;">
							<div class="progress">
								<span class="text">0%</span>
								<span class="percentage"></span>
							</div><div class="info"></div>
							<div class="btns">
								<div id="filePickerpic2" class="filePicker2"></div><div class="uploadBtn">开始上传</div>
							</div>
						</div>
					</div>
				</td>
			</tr>
			<tr height="45">
				<td style="width:20%;" class="td_left">视频：</td>
				<td style="width:30%;">
					<div class="col-md-9 ui-sortable" id="filename"
						 style="font-size:18px;margin-top:10px;margin-bottom:10px;margin-left:10px;font-weight: bold;">
					</div>
					<div>
						<input type="hidden" id="videoId" name="videoId">
						<input type="file" id="vidoeFile" name="vidoeFile"
							   accept="video/mp4" style="float:left;margin-left:5px;display: none;">
						<button id="videofile" type="button" class="btn btn-primary" style="float:left;margin-left:5px;">选择文件</button>
						<button id="uploadvideo" type="button" class="btn btn-primary" style="float:left;margin-left:5px;">开始上传</button>
					</div>
					<span style="margin-top:10px;margin-left:10px;color:red;">只能上传 MP4文件，且不超过 20M</span>
				</td>
			</tr>
			<tr height="45">
				<td style="width:20%;" class="td_left">产品介绍：</td>
				<td style="width:80%;">
					<textarea id="content" name="content" style="width:98%;"></textarea>
				</td>
			</tr>
		</table>
	</form>
<script type="text/javascript" src="${basePath}/static/webuploader/dist/webuploader.js"></script>
<script type="text/javascript" src="${basePath}/static/js/upload/productpic.js"></script>
<script>
	$(function(){
	    var basefiles;
        /**
         * 选择文件
         */
        $("#videofile").click(function(){
            $(this).prev("input[type=file]").click();
        });

        $("input[type=file][name=vidoeFile]").change(function(){
            var that=this;
            var files=this.files;
            basefiles = files;
            var fileFatuiles="";
            $.each(files, function(index, file) {
                //存放大于20M上传失败的
                if(file.size > 20*1024*1024){
                    if(fileFatuiles==""){
                        fileFatuiles=fileFatuiles+file.name;
                    } else {
                        fileFatuiles=fileFatuiles+","+file.name;
                    }
                    return ;
                }else{
                    $("#filename").html(file.name);
				}
            });
            if(fileFatuiles.length > 0){
                $(this).val("");
                alert(fileFatuiles+"文件太大，超过20M，请调整后上传!");
            }
        });

        /**
         * 开始上传文件
         */
        $("#uploadvideo").click(function(){
            var fileuploadUrl=basePath+"/fileUpload/webupload";
            var files = basefiles;
            var fileFatuiles="";

            $.each(files, function(index, file) {
                //存放大于20M上传失败的
                if(file.size > 20*1024*1024){
                    if(fileFatuiles==""){
                        fileFatuiles=fileFatuiles+file.name;
                    } else {
                        fileFatuiles=fileFatuiles+","+file.name;
                    }
                    return ;
                }
                var data = new FormData();
                data.append("file", file);

                $.ajax({
                    data:data,
                    type: "POST",
                    url:fileuploadUrl,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function(data) {
                        alert("上传成功");
                        $("#videoId").val(data.id);
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        debugger;
                    },
                });
            });
            if(fileFatuiles.length > 0){
                alert(fileFatuiles+"文件太大，超过20M，请调整后上传!");
            }
        });

	})
</script>
